iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
自我挑戰組

網頁學習日誌系列 第 26

API : Google Maps API 設定(2)地圖標記

  • 分享至 

  • xImage
  •  

之前已經讓地圖順利呈現出來,現在要把地圖的位置改成台北101
所以要先取得台北101的經緯座標,利用google map 去搜尋台北101

https://ithelp.ithome.com.tw/upload/images/20200411/20107321aSPiCo5kz1.png

在網址列裡面會看到地址後方有兩組數字,紅色框選處,代表的是經緯度。後方的16.74就是縮放尺寸。

https://ithelp.ithome.com.tw/upload/images/20200411/201073215lPruiZLVW.png

現在把它套在從Google Map API 複製的原始碼。

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 25.0335398, lng: 121.5620666},
          zoom: 16
        });
      }
    </script>

要修改的地方如下:

//修改前
center: {lat: -34.397, lng: 150.644},
zoom: 8
//修改後 
center: {lat: 25.0335398, lng: 121.5620666},
zoom: 16

重新整理網頁如下圖:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321mzzOAosq4r.png

地圖不要全螢幕顯示的話可修改 map 的 css

#map {
  width:500px;
  height: 500px;
 }

https://ithelp.ithome.com.tw/upload/images/20200411/20107321vXeCk7XBZL.png

增加標記:

假設想標註101的附近的位置,要再透過網頁搜尋101並在旁邊點擊位置(上方紅框),下方會出現座標經緯度(下方紅框)。

https://ithelp.ithome.com.tw/upload/images/20200411/20107321bTaKJl4vAg.png

現在的做法是,告訴Google Map 要以101座標為中心,另外標一個點也就是上圖位置 ,所以新增下方程式碼:

    var marker = new google.maps.Marker({
      position : { lat: 25.033977, lng: 121.563998 },//positon 位置
      map:map, //標示地圖
      title:'小明的位置'//說明文字(選擇性填寫)
    })

上方程式碼的大略意思為:

定義 marker 為google map 新的標註點,Marker在新增位置時來呼叫他的API 並執行function
詳情可看:https://developers.google.com/maps/documentation/javascript/markers?hl=zh-tw

https://ithelp.ithome.com.tw/upload/images/20200411/20107321cxKVOY5ruo.png

滑鼠滑過會看到title資訊

https://ithelp.ithome.com.tw/upload/images/20200411/20107321ZMS9xqjHCn.png

JS程式碼:

  <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 25.0335398, lng: 121.5620666 },
        zoom: 16
      });
    var marker = new google.maps.Marker({
      position : { lat: 25.033977, lng: 121.563998 },
      map:map,
      title:'小明的位置'
    })
    }
  </script>

上一篇
API : Google Maps API 設定(1)地圖顯示
下一篇
API : Google Maps API 設定(3)新增多個標記
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言